<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码页面</title>
    <script src="../boot&jquery/jquery-3.5.1.js"></script>
    <script src="../boot&jquery/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../boot&jquery/css/bootstrap.css">
    <style>
        #fom{
            margin-top: 50px;
            background-color: #FBFBFB;
        }
        #input{
            margin: 10px 0 10px 50px;
        }
    </style>
    
    <script>
        var password = 0;
        var nowpass = false;
        var newpass = false;
        //页面加载完成后执行
        $(function () {
           password = 0;
           nowpass = false;
           newpass = false;
            findMore();
        })

        //查询出用户正确的密码
        function findMore() {
            $.ajax({
                url:"/Book/userchangepassword?op=findMore",
                data:"post",
                dataType:"json",
                sync:false,
                success:function (list) {
                    password = list[0].upsw;
                }
            })
        }

        //比较原始密码是否正确
        function nowpassword() {
            let upsw = $("#upsw").val();
            if(upsw == password){
                nowpass = true;
                $("h5:eq(0)").html("<span class='glyphicon glyphicon-ok' style='color: rgb(62, 114, 255); font-size: 18px;'>原始密码输入正确!</span>");
            }else {
                nowpass = false;
                $("h5:eq(0)").html("<span class='glyphicon glyphicon-remove' style='color: rgb(255, 20, 0); font-size: 18px;'>原始密码输入错误!</span>");
            }
        }
        
        //比较两次输入的新密码是否一致
        function compare() {
            let newpsw = $("#newpsw").val();
            let newpsw2 = $("#newpsw2").val();
            if(newpsw == newpsw2){
                newpass = true;
                $("h5:eq(1)").html("<span class='glyphicon glyphicon-ok' style='color: rgb(62, 114, 255); font-size: 18px;'>两次密码输入一致!</span>");
            }else {
                newpass = false;
                $("h5:eq(1)").html("<span class='glyphicon glyphicon-remove' style='color: rgb(255, 20, 0); font-size: 18px;'>两次密码输入不一致,请检查!</span>");
            }
        }
    </script>
</head>
<body>

<form class="form-horizontal center-block text-center" role="form" style=" width: 70%; " id="fom">
        <h1 style="margin-bottom: 50px">修改密码</h1>
    <div class="form-group" id="input">
        <div class="form-group has-success">
            <label class="col-sm-4 control-label" for="upsw">请输入原始密码:</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" id="upsw" onkeyup="nowpassword()">
            </div>

        </div>
        <div class="form-group has-success">
            <label class="col-sm-4 control-label" for="newpsw">请输入新密码:</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" id="newpsw">
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-sm-4 control-label" for="newpsw2">请在输入一次:</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" id="newpsw2" onkeyup="compare()">
            </div>
        </div>
        <h5></h5>
        <h5></h5>
    </div>
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-default btn-primary" onclick="updateUser()">保存</button>
            <button type="reset" class="btn btn-default btn-danger">取消</button>
        </div>
</form>
</body>

    <script>
        //保存修改的密码
        function updateUser() {
           let ps = $("#newpsw").val();
           if(nowpass == newpass){
               $.ajax({
                   url: "/Book/userchangepassword?op=updateUser&ps="+ps,
                   type:"post",
                   dataType: "json",
                   sync: false,
                   success:function (b) {
                       if(b){
                           alert("修改成功,请使用新密码重新登录!");
                           window.top.location.href=location.origin+"/Book/UserPersonalCenter/UserloginPage.html";
                       }else {
                           nowpass = false;
                           newpass = false;
                           alert("修改密码失败!");
                           $("#upsw").val("");
                           $("#newpsw").val("");
                           $("#newpsw2").val("");

                       }
                   }
               })
           }else {
               nowpass = false;
               newpass = false;
               $("#upsw").val("");
               $("#newpsw").val("");
               $("#newpsw2").val("");
               alert("输入有误,请重新输入!");

           }
        }
    </script>
</html>
